import React from "react";
// 引入相关的hooks
import { useSelector, useDispatch } from "react-redux";
import {
  getTotalIncome,
  addIncome,
  removeIncome,
} from "@/store/balanceSlice/incomesSlice";

function Counter() {
  const incomList = useSelector((store) => store.incomes.list);
  const addList = () => {
    console.log("add");
    let obj = {
      description: "自己添加",
      amount: 10,
    };
    dispatch(addIncome(obj));
  };
  const delIncom = (item) => {
    // console.log(item);
    dispatch(removeIncome(item.id));
  };
  const store = useSelector((store) => store);
  const totalIncome = getTotalIncome(store);
  // 通过useDispatch 派发事件
  const dispatch = useDispatch();
  return (
    <div>
      <div className="counter">
        <div className="header">
          <h1>counter</h1>
        </div>
        <div>收入项：{totalIncome}</div>
        <button onClick={() => addList()}>增收</button>
      </div>
      <section className="main">
        <ul className="todo-list">
          {incomList.map((item) => (
            <li
              className={item.done ? "completed" : ""}
              key={item.id}
            >
              <div className="view">
                <label>
                  {item.description}:{item.amount}
                </label>
                <button
                  className="destroy"
                  onClick={() => delIncom(item)}
                ></button>
              </div>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
}

export default Counter;
